package com.heiko.bloom

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import com.heiko.bloom.ui.theme.*

@Composable
fun LoginPage(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        LoginTitle()
        LoginInputBox()
        HintWithUnderline()
        LoginButton(navController)
    }
}

@Preview(showBackground = true, backgroundColor = 0x00FFFF)
@Composable
private fun LoginButton(navController: NavController) {
    Button(
        onClick = {
            navController.navigate("home/123")
        }, modifier = Modifier
            .padding(horizontal = 16.dp, vertical = 16.dp)
            .height(48.dp)
            .fillMaxWidth()
            .clip(medium),
        colors = ButtonDefaults.buttonColors(backgroundColor = pink900)
    ) {
        Text(text = "Log in", style = button, color = white)
    }
}

@Preview(showBackground = true, backgroundColor = 0x00FFFF)
@Composable
private fun HintWithUnderline() {
    Text(
        text = "By clicking below, you agree to our Terms of Use and consent to our Privacy Policy.",
        modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 16.dp),
        style = body1,
        textAlign = TextAlign.Center
    )
}

@Preview(showBackground = true, backgroundColor = 0x00FFFF)
@Composable
private fun LoginInputBox() {
    val email = remember { mutableStateOf(TextFieldValue()) }
    val pwd = remember { mutableStateOf(TextFieldValue()) }
    Column() {
        OutlinedTextField(
            value = email.value,
            onValueChange = { email.value = it },
            placeholder = { Text("Email address", style = MaterialTheme.typography.body1) },
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = 16.dp, end = 16.dp, top = 16.dp)
        )

        OutlinedTextField(
            value = pwd.value,
            onValueChange = { pwd.value = it },
            placeholder = {
                Text(
                    text = "Password (8+ characters)",
                    style = body1
                )
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = 16.dp, end = 16.dp, top = 16.dp)
        )
    }
}

@Preview(showBackground = true, backgroundColor = 0x00FFFF)
@Composable
private fun LoginTitle() {
    Text(text = "Log in with email", style = h1, modifier = Modifier.padding(top = 184.dp))
}